<template>
  <div class="signIn">
    <img class="qr-img" src="../assets/logo.png">
    <h1>{{ qrcode }}</h1>
    <div class="signer"><h2>{{signer}}</h2></div>
    <ul>
      <li v-bind="newUser" mounted: ="signUp"></li>
      <li v-for="user in users" :key="user.id">
      {{user.label}}
      </li>
    </ul>
    <keep-alive include="signIn">
    <router-view>
        <!-- 只有路径匹配到的视图 , 组件会被缓存！ -->
    </router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'signIn',
  data () {
    return {
      qrcode: '扫二维码签到',
      signer: 'signer:',
      users: [
      ],
      newUser: '',
      totalCount: 0
    }
  },
  mounted () {
    this.signIn()
  },
  methods: {
    signIn: function (e) {
      var ws = new WebSocket('localhost:80/data.php')
      ws.onmessage = function () {
        if (this.users.length > 20) {
          this.users.shift(this.users)
        }
        this.users.push({
          label: this.newUser
        })
        this.totalCount += 1
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
</style>
